<!-- 评价内容 -->
<div id="reviews-tab" class="tab-content p-6 hidden bg-white" data-goods-id="{$goods.id}">
    <!-- 评论提交表单 -->

    <div
        class="relative rounded-lg overflow-hidden border border-gray-200 bg-gray-100">
        <textarea id="comment-textarea" placeholder="{if $user_id}写下你的评论...{/if}"
            class="w-full p-4 border-0 resize-none focus:outline-none focus:ring-0 min-h-24 text-gray-800 {if !$user_id}bg-gray-100 cursor-not-allowed{/if}"
            maxlength="500" {if !$user_id}disabled{/if}></textarea>

        <!-- 未登录提示 -->
        {if !$user_id}
        <div class="absolute inset-0 flex items-center justify-center bg-gray-50">
            <div class="text-center">
                <span class="text-gray-400 text-sm mr-2">请</span>
                <a onclick="window.location.href='/user/login' + '?redirect=' + encodeURIComponent(window.location.href)"
                    class="text-blue-500 text-sm hover:underline transition-colors cursor-pointer"
                    target="_blank">登录</a>
                <span class="text-gray-400 text-sm ml-2">后发表评论</span>
            </div>
        </div>
        {/if}

        <!-- 上传的图片展示区域 -->
        <div id="uploaded-images-container" class="hidden p-4 border-t border-gray-200">
            <div class="flex flex-wrap gap-2" id="uploaded-images-list"></div>
        </div>

        <!-- 上传的附件展示区域 -->
        <div id="uploaded-files-container" class="hidden p-4 border-t border-gray-200">
            <div class="space-y-2" id="uploaded-files-list"></div>
        </div>

        <!-- 上传进度条 -->
        <div id="upload-progress-container" class="hidden p-4 border-t border-gray-200">
            <div class="flex items-center space-x-3">
                <div class="flex-1">
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        <div id="upload-progress-bar"
                            class="bg-blue-600 h-2 rounded-full transition-all duration-300 w-0">
                        </div>
                    </div>
                </div>
                <span id="upload-progress-text" class="text-sm text-gray-600">0%</span>
            </div>
        </div>

        {if $user_id}
        <div class="px-4 py-2 text-right text-xs text-gray-400">
            <span id="content-length">0</span>/500
        </div>
        {/if}
    </div>

    <div class="flex justify-between items-center mt-4 {if !$user_id}opacity-50 pointer-events-none{/if}">
        <div class="flex items-center gap-2">
            <!-- 图片上传 -->
            <input type="file" id="image-upload" accept="image/*" multiple style="display: none">
            <button
                class="flex items-center gap-1 px-3 py-1.5 text-sm text-gray-600 hover:text-blue-500 transition-colors rounded-lg border border-gray-200 hover:border-blue-300"
                {if !$user_id}disabled{/if} title="上传图片">
                <span>
                    <i class="fas fa-image w-4 h-4"></i>
                </span>
            </button>

            <!-- 附件上传 -->
            <input type="file" id="file-upload" style="display: none">
            <button
                class="flex items-center gap-1 px-3 py-1.5 text-sm text-gray-600 hover:text-blue-500 transition-colors rounded-lg border border-gray-200 hover:border-blue-300"
                {if !$user_id}disabled{/if} title="上传附件">
                <span class="inline-block ">
                    <i class="fas fa-paperclip w-4 h-4"></i>
                </span>
            </button>
        </div>
        <div class="flex items-center gap-2">
            <button id="reset-btn"
                class="hidden px-3 py-1.5 text-sm text-gray-600 hover:text-gray-800 transition-colors rounded-lg hover:bg-gray-50 border border-gray-200"
                {if !$user_id}disabled{/if}>取消</button>
            <button id="submit-btn"
                class="px-4 py-1.5 text-sm bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed border border-blue-500 hover:border-blue-600"
                disabled>
                发表评论
            </button>
        </div>
    </div>


    <!-- 评论统计和排序 -->
    <div class="flex justify-between items-center mt-4 mb-6">
        <span class="text-lg font-medium text-gray-800">共<span
                id="comments-total">{$comments_total|default=0}</span>条评论</span>
        <!-- 排序 -->
        <div class="relative">
            <div
                class="sort-dropdown flex items-center gap-2 px-3 py-2 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors border border-gray-200">
                <span class="text-sm text-gray-600" id="current-sort-label">默认正序</span>
                <i class="fas fa-chevron-down w-4 h-4 text-gray-400 transition-transform duration-200 text-sm"
                    id="sort-arrow"></i>
            </div>

            <!-- 下拉菜单 -->
            <div id="sort-dropdown-menu"
                class="hidden absolute top-full right-0 mt-1 w-32 bg-white border border-gray-200 rounded-lg shadow-lg z-50">
                <div class="items-center px-3 py-2 text-sm hover:bg-gray-50 cursor-pointer transition-colors sort-option"
                    data-value="create_time">
                    <span>默认正序</span>
                   
                </div>
                <div class="items-center px-3 py-2 text-sm hover:bg-gray-50 cursor-pointer transition-colors sort-option"
                    data-value="reply_time">
                    <span>回复倒序</span>
                </div>
                <div class="items-center px-3 py-2 text-sm hover:bg-gray-50 cursor-pointer transition-colors sort-option"
                    data-value="likes">
                    <span>点赞倒序</span>
                </div>
            </div>
        </div>
    </div>

    <!-- SEO评论内容（隐藏，仅用于搜索引擎） -->
    <div id="seo-comments" class="hidden">
        {if $comments && count($comments) > 0}
        {volist name="comments" id="comment" key="index"}
        {include file="default/goods/detail/components/comment-item" comment=$comment index=$index /}
        {/volist}
        {/if}
    </div>

    <!-- 动态评论列表容器 -->
    <div class="">
        <div id="comments-list">
            <!-- 初始加载状态 -->
            <div id="initial-loading" class="text-center py-12">
                <div class="flex flex-col items-center justify-center">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mb-2"></div>
                    <span class="text-gray-600 text-sm">加载评论中...</span>
                </div>
            </div>
        </div>

        <!-- 加载更多 -->
        <div id="load-more-container" class="hidden text-center mt-8">
            <button id="load-more-btn"
                class="px-6 py-2 rounded-lg text-gray-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed border border-gray-300 hover:border-blue-500 hover:text-blue-500">
                查看更多评论
            </button>
        </div>

        <!-- 加载状态 -->
        <div id="loading-state" class="hidden text-center py-8">
            <div class="flex flex-col items-center justify-center">
                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mb-2"></div>
                <span class="text-gray-600 text-sm">加载中...</span>
            </div>
        </div>

        <!-- 空状态 -->
        <div id="empty-state" class="hidden text-center py-12">
            <div class="flex flex-col items-center justify-center">
                <i class="fas fa-comments w-16 h-16 text-gray-400 mb-4 text-6xl"></i>
                <p class="text-gray-600 text-lg mb-1">暂无评论</p>
                <p class="text-gray-400 text-sm">快来发表第一条评论吧！</p>
            </div>
        </div>
    </div>
</div>

{if $user_id}
<!-- 用户数据 -->
<div id="user-data" class="hidden" data-user-id="{$user_id}" data-username="{$user.username|default=''}"
    data-nickname="{$user.nickname|default=''}" data-avatar="{$user.avatar|default=''}">
</div>
{/if}

<!-- 评论组件所需的JS -->
<script src="/static/default/js/comments.js?v={$static_version}"></script>

<!-- 初始化评论系统 -->
<script>
// 确保在DOM和jQuery都准备好后再初始化
function initCommentsSystem() {
    // 检查jQuery是否可用
    if (typeof $ === 'undefined') {
        console.error('jQuery is not loaded');
        return;
    }

    // 获取商品ID
    const goodsId = $('#reviews-tab').data('goods-id');

    // 获取用户信息
    let userInfo = null;
    {if $user_id}
    const userData = $('#user-data');
    if (userData.length) {
        userInfo = {
            id: userData.data('user-id'),
            username: userData.data('username'),
            nickname: userData.data('nickname'),
            avatar: userData.data('avatar')
        };
    }
    {/if}

    // 初始化评论管理器
    if (typeof CommentsManager !== 'undefined' && goodsId) {
        window.commentsManager = new CommentsManager({
            goodsId: goodsId,
            userInfo: userInfo
        });

        // 监听tab切换事件 - 监听评论tab按钮的点击
        $(document).on('click', 'button[onclick="showTab(\'reviews\')"]', function() {
            // 当评论tab被激活时，延迟加载评论数据
            setTimeout(() => {
                if (window.commentsManager && $('#reviews-tab').is(':visible')) {
                    window.commentsManager.loadCommentsOnTabActive();
                }
            }, 100);
        });

        // 重写全局showTab函数，添加评论加载逻辑
        const originalShowTab = window.showTab;
        window.showTab = function(tabName) {
            if (originalShowTab) {
                originalShowTab(tabName);
            }

            // 如果切换到评论tab，加载评论数据
            if (tabName === 'reviews' && window.commentsManager) {
                setTimeout(() => {
                    window.commentsManager.loadCommentsOnTabActive();
                }, 100);
            }
        };

        // 如果评论tab已经是激活状态，立即加载
        if ($('#reviews-tab').is(':visible')) {
            window.commentsManager.loadCommentsOnTabActive();
        }

        console.log('Comments system initialized successfully');
    } else {
        console.error('CommentsManager not found or goodsId missing');
    }
}

// 多种方式确保初始化
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initCommentsSystem);
} else {
    // DOM已经准备好了
    if (typeof $ !== 'undefined') {
        $(document).ready(initCommentsSystem);
    } else {
        // 等待jQuery加载
        setTimeout(initCommentsSystem, 100);
    }
}
</script>